<template>
  <div class="d_mainFlex container">
    <div class="d_treeBox permanageLf">
      <div class="title">
        <h3>组织结构</h3>
        <i
          class="iconfont xinjian mr5 f16 pointer"
          style="color: #83a0ff"
          @click="AddorgOrdep"
        />
      </div>
      <div class="d_nrBox">
        <div class="treeList">
          <ul>
            <li
              @click="resetAllEmployees"
              :class="classIndex === -1 ? 'on' : ''"
            >
              <i class="iconfont folderIco" />
              <p>所有成员</p>
            </li>
            <li
              v-for="(item, index) in departData"
              :key="item.index"
              :props="customProps"
              :class="classIndex === index ? 'on' : ''"
              @click="currentDepart(item, index)"
            >
              <i class="iconfont folderIco" />
              <p>{{ item.departmentName }}</p>
              <div class="btn">
                <span
                  @click.stop="UpdateDepartment(item)"
                  class="iconfont EditIco"
                ></span>
                <span
                  @click.stop="remove(item)"
                  class="iconfont DeleteIco"
                ></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="case">
      <na-table
        :datas.sync="tableData"
        :searchObj.sync="search"
        @newAdd="addClick"
        @updateDatas="getAllEmployees"
      >
      </na-table>
    </div>
    <!-- 添加组织架构或者部门   -->
    <el-dialog
      title="新增组织"
      :visible.sync="isAddorgOrdep"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div v-if="!isDep" class="flex mb15">
          <div class="labelTT">组织类型</div>
          <div class="flex">
            <el-radio-group v-model="addOrgType">
              <el-radio label="department">部门</el-radio>
              <!--              <el-radio label="company">公司</el-radio>-->
            </el-radio-group>
          </div>
        </div>
        <div class="flex">
          <div class="labelTT">组织名称</div>
          <div class="flex1">
            <el-input v-model="orgName" placeholder="请输入内容" size="mini" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddorgOrdep = false">取 消</el-button>
        <el-button
          :loading="addorgLoading"
          :disabled="addorgLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addOrg"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改部门数据   -->
    <el-dialog
      title="修改部门名称"
      :visible.sync="isUpadatedep"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div class="flex">
          <div class="labelTT">部门名称</div>
          <div class="flex1">
            <el-input
              v-model="updateDepart.departmentName"
              placeholder="请输入内容"
              size="mini"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isUpadatedep = false">取 消</el-button>
        <el-button
          :loading="upLoading"
          :disabled="upLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="defineUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增人员   -->
    <el-dialog
      title="新增人员"
      :visible.sync="isAddPersonnel"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
      @close="closeDialog"
    >
      <div class="dialogDody flex flex_start">
        <div class="flex1">
          <el-form
            ref="personnelForm"
            :model="personnelData"
            :rules="rules"
            label-width="80px"
            class="dialogForm"
          >
            <el-form-item label="员工工号" prop="loginAccount">
              <el-input
                v-model="personnelData.loginAccount"
                placeholder="请输入员工工号"
                size="small"
              />
            </el-form-item>
            <el-form-item label="员工名称" prop="employeeName">
              <el-input
                v-model="personnelData.employeeName"
                placeholder="请输入员工名称"
                size="small"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
              <el-input
                v-model="personnelData.mobile"
                placeholder="请输入联系电话"
                size="small"
              />
            </el-form-item>
            <el-form-item label="部门" prop="departmentCode">
              <el-cascader
                ref="cascader"
                v-model="personnelData.departmentCode"
                :options="dialogDepartData"
                :props="depProps"
                size="small"
                @change="handleChange"
              />
            </el-form-item>
            <el-form-item label="性别">
              <el-select
                        filterable
                v-model="personnelData.employeeSex"
                placeholder="请选择"
                size="small"
              >
                <el-option label="男" :value="1"> </el-option>
                <el-option label="女" :value="2"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="角色权限" prop="roleCode">
              <el-select
                        filterable
                v-model="personnelData.roleCode"
                placeholder="请选择角色权限"
                size="small"
                filterable
              >
                <el-option
                  v-for="item in allroles"
                  :key="item.roleID"
                  :label="item.roleName"
                  :value="item.roleCode"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="flex flex_between">
          <div>
            <el-checkbox v-model="checked">继续新建下一条</el-checkbox>
          </div>
          <div>
            <el-button size="mini" @click="isAddPersonnel = false">取 消</el-button>
            <el-button
              v-loading="addperLoading"
              :disabled="addperLoading"
              element-loading-spinner="el-icon-loading"
              type="primary"
              size="mini"
              @click="RegisterNewEmployee"
              >保 存</el-button
            >
          </div>
        </div>
      </span>
    </el-dialog>

    <!-- 修改角色权限 -->
    <el-dialog
      title="修改角色权限"
      :visible.sync="isJurisdiction"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div class="flex">
          <div class="labelTT">员工工号</div>
          <div class="flex1">
            <el-input
              v-model="jurisdictionForm.EmployeeCode"
              placeholder="请输入内容"
              disabled
              size="mini"
            />
          </div>
        </div>
        <div class="flex" style="margin-top: 10px">
          <div class="labelTT">员工名称</div>
          <div class="flex1">
            <el-input
              v-model="jurisdictionForm.employeeName"
              placeholder="请输入内容"
              disabled
              size="mini"
            />
          </div>
        </div>
        <div class="flex" style="margin-top: 10px">
          <div class="labelTT">角色权限</div>
          <div class="flex1">
            <el-select
                        filterable
              v-model="jurisdictionForm.RoleCode"
              placeholder="请选择角色权限"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in allroles"
                :key="index"
                :label="item.roleName"
                :value="item.roleCode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isJurisdiction = false">取 消</el-button>
        <el-button
          :loading="jurisdictionLoading"
          :disabled="jurisdictionLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="jurisdictionSubmit"
          >确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import naTable from "@/components/naTable";
import { arraySort } from "@/utils/index";
import { IdCard } from "@/utils/index";
export default {
  name: "PersonnelManage",
  components: {
    naTable,
  },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字"));
        } else {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 300);
    };
    return {
      tabLoading: false,
      tableHeight: null,
      isTreeOption: false, // 部门隐藏操作弹框
      isActiveDia: false, // 激活员工弹框
      allEmployees: [],
      organizations: [], // 所有组织架构
      departData: [], // 当前组织架构对应得部门
      dialogDepartData: [], // 弹框里面当前组织架构对应得部门
      isDepartClick: true, // 是否可以点击部门
      isAddorgOrdep: false, // 添加组织架构或者部门
      isUpadatedep: false, // 是否显示修改部门名字弹框
      isAddPersonnel: false, // 是否显示新增人员弹框
      isEditPersonnel: false, // 是否显示修改人员弹框
      isJurisdiction: false, //修改角色权限弹出层
      isDep: false, // 是否添加二级部门
      classIndex: -1, // 选中分组索引
      addorgLoading: false,
      checked:false,
      upLoading: false,
      addperLoading: false,
      jurisdictionLoading: false,
      jurisdictionForm: {
        EmployeeCode: "", //员工工号
        employeeName: "", //员工名称
        RoleCode: "", //角色代码
      },
      allroles: {}, // 所有角色数据
      imageUrl: "", // 头像链接
      addOrgType: "department", // 添加组织类型,默认部门
      orgName: "", // 新增组织机构名称
      departmentDate: {
        parentCode: "",
      }, // 新增部门参数
      customProps: {
        label: "departmentName",
        children: "children",
      },
      operations: [
        [
          {
            text: "修改",
            key: "modify",
          },
        ],
        //[{ text: "修改角色", key: "jurisdiction" }],
        [
          {
            text: "重置密码",
            key: "resetPwd",
          },
          {
            text: "启用",
            key: "enable",
          },
          {
            text: "激活",
            key: "activation",
          },
        ],
        [
          {
            text: "删除",
            key: "delete",
          },
        ],
      ],
      // 激活账号表单
      activeForm: {
        employeeCode: "",
        mobile: "",
        loginAccount: "",
        loginPassWord: "",
        role: "",
      },
      isEnabled: null, // 禁用or启用
      // 新增员工表单数据
      valueDate: "",
      personnelData: {
        loginAccount: "", //员工账号（工号）
        employeeName: "", //员工姓名
        mobile: "", //联系电话
        departmentCode: "", //部门编号
        roleCode: "", //角色编码
        employeeSex: 1, //员工性别：1表示男；2表示女
      }, // 新增人员表单数据
      employeeTotal: null,
      // 员工列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        queryDataBaseFiled: "",
        departmentCode: "",
        isShowDisabled: 0,
      },
      formObj:{},
      updateDepart: {
        departmentID: "",
        parentCode: "",
        organizationCode: "",
        departmentName: "",
      }, // 修改部门数据参数
      tableHead: [], // 表头数据
      depProps: {
        label: "departmentName",
        value: "departmentCode",
        checkStrictly: true,
      },
      rules: {
        loginAccount: [
          {
            required: true,
            message: "请输入员工工号",
            trigger: "blur",
          },
        ],
        employeeName: [
          {
            required: true,
            message: "请输入员工名称",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            validator: checkTel,
            trigger: "blur",
          },
        ],
        departmentCode: [
          {
            required: true,
            message: "请选择部门",
            trigger: "chang",
          },
        ],
        roleCode: [
          {
            required: true,
            message: "请选择角色",
            trigger: "chang",
          },
        ],
      },

      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "employeeID", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "accountState", //是否禁用显示的字段
        disableStatus: "启用", //判断未禁用的状态值
        // addTitle:'',//新建按钮名称-为''则不显示，为undefine则为新建
        addPermission: "MenuCode7-1-1", //新建按钮权限
        voidWord: "", //需要查询作废的字段
        statusList: [], //状态筛选条件列表
        statusWord: "", //状态筛选的字段
        //表格按钮
        operationBtn: [
          {
            title: "修改", //按钮名称
            methodsName: "editPerson", //按钮绑定方法的字段
            permission: "MenuCode7-1-4", //按钮权限
          },
          {
            title: "查看", //按钮名称
            methodsName: "handleSee", //按钮绑定方法的字段
            permission: "", //按钮权限

          },
          {
            title: "禁用",
            methodsName: "disableOrEnable",
            permission: "MenuCode7-1-3", //按钮权限
          },
          // {
          //   title: "修改角色",
          //   methodsName: "editInfo",
          //   permission: "MenuCode7-1-7", //按钮权限
          //   hideCondition: {
          //     //按钮显隐条件
          //     prop: "loginAccount", //控制显隐的状态字段
          //     show: [
          //       //有哪些状态可以使用-值必须跟状态的类型保持一致
          //     ],
          //     noEqual: "未激活",
          //   },
          // },
          {
            title: "重置密码",
            methodsName: "restPwd",
            permission: "MenuCode7-1-6", //按钮权限
          },
          // {
          //   title: "删除",
          //   methodsName: "deleEmployee",
          //   permission: "MenuCode7-1-5", //按钮权限
          // },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  created() {
    //  获取所有组织架构
    this.getOrganization();
    //  获取所有员工
    this.getAllEmployees();
    // 获取员工表头
    this.getTableHead();
    this.formObj = JSON.parse(JSON.stringify(this.personnelData))
  },
  mounted() {
    // 获取所有角色数据
    this.getAllRols();
  },
  methods: {
    // 新建点击事件
    addClick() {
      this.isAddPersonnel = true;
      this.checked = false
      //  获取所有组织架构
      this.getOrganization();
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead];
        heads.forEach((item) => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width;
            return;
          }
        });
        this.saveHead(heads);
      }, 100);
    },

    //日期范围选择事件
    handleDateChange() {
      if (this.valueDate) {
        this.personnelData.contractSignedDate = this.valueDate[0];
        this.personnelData.contractExpirationDate = this.valueDate[1];
      } else {
        this.personnelData.contractSignedDate = "";
        this.personnelData.contractExpirationDate = "";
      }
    },
    //修改角色权限
    jurisdictionSubmit() {
      this.jurisdictionLoading = true;
      this.$api.user
        .UpdateEmployeeManageRole(this.jurisdictionForm)
        .then((res) => {
          this.jurisdictionLoading = false;
          this.isJurisdiction = false;
          this.$message.success("修改成功");
          this.getAllEmployees();
        })
        .catch((err) => {
          this.jurisdictionLoading = false;
        });
    },

    //身份证号失去焦点事件
    cardNoBlur(id) {
      this.personnelData.birthday = IdCard(id, 1);
    },

    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray;
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {});
      }, 300);
    },
    // 修改角色
    editInfo(data) {
      this.getInitInfo(data);
      this.isJurisdiction = true;
    },
    //修改
    editPerson(data) {
      this.$router.push({
        path: "/personnel/personnelDetail", // 跳转的路径
        query: {
          employeeID: data.employeeID,
        },
      });
    },

    //查看
    handleSee(data){
      this.$router.push({
        path: "/personnel/personnelDetail", // 跳转的路径
        query: {
          employeeID: data.employeeID,
          type:'see'
        },
      });
    },

    // 获取当前员工基础信息详情
    getInitInfo(row) {
      this.valueDate = "";
      this.personnelData.contractSignedDate = "";
      this.personnelData.contractExpirationDate = "";
      const parmas = {
        queryBy: 1,
        queryValue: row.employeeID.toString(),
      };
      this.$api.user.GetSingleEmployee(parmas).then((res) => {
        this.jurisdictionForm.EmployeeCode = res.employeeCode;
        this.jurisdictionForm.employeeName = res.employeeName;
        this.jurisdictionForm.RoleCode = res.manageRole;
        this.personnelData = res;
        this.personnelData.employeeSex = res.employeeSex.toString();
        this.imageUrl = res.headImageUrl;
        this.personnelData["orgDeparts"] = [];
        this.personnelData["orgDeparts"].push(res.departmentCode);
        this.getDialogAllbm();
      });
    },
    // 重置密码
    restPwd(data) {
      this.activeForm.employeeCode = data.employeeCode;
      const parmas = {
        employeeCode: this.activeForm.employeeCode,
      };
      this.$confirm("确定要重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.restPwd(parmas).then(() => {
          // 刷新部门列表
          this.getOrgDepart();
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
        });
      });
    },
    // 禁用/启用员工账号
    disableOrEnable(data) {
      this.activeForm.employeeCode = data.employeeCode;
      console.log(data);
      const parmas = {
        employeeCode: this.activeForm.employeeCode,
        isEnabled: data.accountState === '启用' ? false : true,
      };
      this.$confirm("确定启用/禁用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.disableOrEnable(parmas).then(() => {
          this.getAllEmployees();
          this.$message({
            message: "设置成功",
            type: "success",
          });
        });
      });
    },
    // 删除员工
    deleEmployee(data) {
      const parmas = {
        entityID: data.employeeID,
      };
      this.$confirm("确定删除该员工账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.deleEmployee(parmas).then(() => {
          this.getAllEmployees();
          this.$message({
            message: "删除成功",
            type: "success",
          });
        });
      });
    },
    // 修改当前员工基础信息
    updateInit() {
      const parmas = this.personnelData;
      this.$refs.personnelEditForm.validate((valid) => {
        if (valid) {
          this.addperLoading = true;
          this.$api.user
            .UpdateEmployeeBaseData(parmas)
            .then(() => {
              this.isEditPersonnel = false;
              this.addperLoading = false;
              this.getAllEmployees();
              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addperLoading = false;
            });
        }
      });
    },
    handleChange(val) {
      const index = val.length - 1;
      this.personnelData.departmentCode = val[index];
      this.$refs.cascader.dropDownVisible = false;
    },
    // 获取所有角色数据
    getAllRols() {
      this.$api.user.GetAllSystemRoles().then((res) => {
        this.allroles = res;
      });
    },
    // 新增员工
    RegisterNewEmployee() {
      const parmas = this.personnelData;
      this.$refs.personnelForm.validate((valid) => {
        if (valid) {
          this.addperLoading = true;
          if(this.checked){
            this.$api.user
            .RegisterNewEmployee(parmas)
            .then(() => {
                this.personnelData = JSON.parse(JSON.stringify(this.formObj))
              this.getAllEmployees();
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.addperLoading = false;
            })
            .catch(() => {
              this.addperLoading = false;
            });
          }else{
            this.$api.user
            .RegisterNewEmployee(parmas)
            .then(() => {
                this.isAddPersonnel = false;
                this.addperLoading = false;
              this.getAllEmployees();
              this.$message({
                message: "保存成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addperLoading = false;
            });
          }

        }
      });
    },
    // 图片上传
    myUpload(e) {
      const file = e.file;
      const type = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (
        type !== "png" &&
        type !== "jpg" &&
        type !== "jpeg" &&
        type !== "gif" &&
        type !== "bmp"
      ) {
        this.$message.error("上传图片格式错误，请重新上传!");
        return false;
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M，请重新上传!");
        return false;
      } else {
        var formData = new FormData();
        formData.append("file", file);
        this.$api.common.UploadHeadPicture(formData).then((res) => {
          this.imageUrl = res.fileFullUrl;
          this.personnelData.headImage = res.fileName;
        });
      }
    },
    // 获取所有组织架构
    getOrganization() {
      this.$api.user.getAllOrganizations().then((res) => {
        this.organizations = res;
        this.search.organizationCode = res[0].orgCode;
        this.personnelData.organizationCode = res[0].orgCode;
        // 获取某个组织架构下得所有部门列表
        this.getOrgDepart();
        this.getDialogAllbm();
      });
    },
    // 获取所有员工列表
    getAllEmployees() {
      const parmas = this.search;
      this.isDepartClick = false;
      this.tabLoading = true;
      this.$api.user
        .getMatchEmployees(parmas)
        .then((res) => {
          res.list.forEach((item) => {
            if (item.employeeSex == 1) {
              item.employeeSex = "男";
            } else {
              item.employeeSex = "女";
            }
            if (item.accountState == 1) {
              item.accountState = "启用";
            } else {
              item.accountState = "禁用";
            }
          });
          console.log(res);
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.isDepartClick = true;
          this.tabLoading = false;
        })
        .catch(() => {
          this.isDepartClick = true;
          this.tabLoading = false;
        });
    },
    // 获取某个组织架构下得所有部门列表
    getOrgDepart() {
      const parmas = {
        orgCode: this.search.organizationCode,
      };
      this.$api.user.getOrgDepart(parmas).then((res) => {
        this.departData = res;
      });
    },
    AddorgOrdep() {
      this.isDep = false;
      this.isAddorgOrdep = true;
      this.orgName = "";
    },
    append(data) {
      this.isDep = true;
      this.isAddorgOrdep = true;
      this.orgName = "";
      this.departData.parentCode = data.departmentCode; // 父级部门的code
    },
    // 改变组织机构
    changeOrg(val) {
      this.personnelData.organization = val;
      this.getAllEmployees(); // 刷新员工列表
      this.getOrgDepart(); // 刷新部门列表
    },
    // 新增员工改变组织机构
    addChangeOrg() {
      this.getDialogAllbm(); // 刷新弹框里面的该组织机构下面的所有部门列表
    },
    // 弹框里面某部门下面的所有部门
    getDialogAllbm() {
      const parmas = {
        orgCode: this.personnelData.organizationCode,
      };
      this.$api.user.getOrgDepart(parmas).then((res) => {
        this.dialogDepartData = res;
      });
    },
    // 删除部门
    remove(data) {
      const parmas = {
        entityID: data.departmentID,
        entityCode: data.departmentCode,
      };
      console.log();
      this.$confirm(
        "确定要删除【" + data.departmentName + "】部门, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$api.user.DeleteDepartment(parmas).then(() => {
            // 刷新部门列表
            this.getOrgDepart();
            this.$message({
              message: "该部门已删除",
              type: "success",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改部门数据
    UpdateDepartment(data) {
      this.isUpadatedep = true;
      this.updateDepart.departmentName = data.departmentName;
      this.updateDepart.organizationCode = this.search.organizationCode;
      this.updateDepart.parentCode = data.parentCode;
      this.updateDepart.departmentID = data.departmentID;
    },
    // 修改部门数据
    defineUpdate() {
      const parmas = this.updateDepart;
      this.$api.user.UpdateDepartment(parmas).then(() => {
        this.isUpadatedep = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getOrgDepart(); // 刷新部门数据
      });
    },
    currentDepart(data, index) {
      this.search.departmentCode = data.departmentCode;
      // 获取所有员工列表
      this.getAllEmployees();
      this.classIndex = index;
    },
    // 重置所有员工搜索条件
    resetAllEmployees() {
      this.search = this.$options.data().search;
      // 获取所有员工列表
      this.getAllEmployees();
      this.classIndex = -1;
    },
    // 新增公司
    addCompany() {
      const parmas = {
        orgName: this.orgName,
      };
      this.addorgLoading = true;
      this.$api.user
        .AddOrganization(parmas)
        .then((res) => {
          this.$message({
            message: "新增公司成功",
            type: "success",
          });
          this.getOrganization();
          this.isAddorgOrdep = false;
          this.addorgLoading = false;
        })
        .catch(() => {
          this.addorgLoading = false;
        });
    },
    // 新增部门
    addDepartment() {
      this.addorgLoading = true;
      const parmas = {
        parentCode: this.departData.parentCode,
        OrganizationCode: this.search.organizationCode,
        departmentName: this.orgName,
      };
      this.$api.user
        .AddDepartment(parmas)
        .then((res) => {
          this.$message({
            message: "新增部门成功",
            type: "success",
          });
          this.isAddorgOrdep = false;
          this.addorgLoading = false;
          // 刷新部门列表
          this.getOrgDepart();
        })
        .catch(() => {
          this.addorgLoading = false;
        });
    },
    // 新增组织
    addOrg() {
      if (this.addOrgType === "department") {
        this.addDepartment();
      } else if (this.addOrgType === "company") {
        this.addCompany();
      }
    },
    // 获取人员列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.employeelist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
      });
    },
    // 批量操作
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.personnelForm) {
        this.$refs.personnelForm.resetFields();
      }
      if (this.$refs.personnelEditForm) {
        this.$refs.personnelEditForm.resetFields();
      }
      this.personnelData = this.$options.data().personnelData;
    },
  },
};
</script>
<style lang="scss" scoped>
.addHeadCon {
  width: 120px;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    box-shadow: 0px 2px 6px 0px rgba(232, 239, 251, 1);
  }
}

.permanageLf {
  .treeOpdiv {
    width: 120px;
    top: 25px;

    ul {
      padding: 4px 0;

      li {
        line-height: 30px;
        text-align: center;

        &:hover {
          background: #3f61f1;
          color: #fff;
        }
      }
    }
  }

  .orgCon:hover {
    background: #eff2ff;
  }

  .memberList {
    li {
      margin: 10px 0;
    }
  }

  .custom-tree-node {
    width: 100%;

    .treeoprions {
      display: none;
    }
  }

  .custom-tree-node:hover {
    .treeoprions {
      display: block !important;
    }
  }
}

.dialogDody {
  .labelTT {
    width: 88px;
    line-height: 28px;
  }
}
</style>
